<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR_LP:3206064928</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="MR_LP">如果你能看见这行文字，说明你的浏览器不支持 Canvas</canvas>
</body>
<script>
    //获取 canvas 元素
    var canvas = document.getElementById("MR_LP");
    //渲染上下文
    var ctx = null;

    //获取鼠标活动时的鼠标坐标
    var warea = {
        x:null,
        y:null,
        max:160
    };

    if(canvas.getContext){
        //获取 canvas 画布的上下文
        ctx = canvas.getContext("2d");
        //注意：此处必须填写小写2d
    }

    resize();
    window.onresize = resize;

    function resize(){
        canvas.width = window.innerWidth ||
          document.getElement.clientWidth ||
          document.body.clientWidth;
        canvas.height = (window.innerHeight ||
          document.getElement.clientHeight ||
          document.body.clientHeight) - 200;
        //为了在底部留出一段距离
    }

    //注意：在书写的时候，内部千万不要加 ；

    window.onmousemove = function(e){
        e = e || window.event;

        warea.x = e.clientX;
        warea.y = e.clientY;
    };
    window.onmouseout = function(e){
        warea.x = null;
        warea.y = null;
    };

    //添加粒子
    //x  , y  为		粒子坐标
    //xa , ya 为		粒子 xy 轴加速度
    //max 	  为		连线的最大距离
    var dots = [];
    for(var i = 0; i < 300; i++){
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var xa = Math.random() * 2 - 1;
        var ya = Math.random() * 2 - 1;

        dots.push({
            x : x,
            y : y,
            xa : xa,
            ya : ya,
            max : 120
        })
    }

    // 每一帧循环的逻辑
    function animate(){

        // 将鼠标坐标添加进去，产生一个用于比对距离的点数组
        var ndots  = [warea].concat(dots);
        ctx.clearRect(0,0,canvas.width, canvas.height);
        dots.forEach(function(dot,index){
            for(var i =0;i<ndots.length; i++){
                var dot2 = ndots[i],
                    xGup = dot.x - dot2.x ,
                    yGup = dot.y - dot2.y ,
                    dis = Math.sqrt(xGup * xGup + yGup * yGup),
                    ratio = (dot.max - dis) / dot.max;

                if (dot2.x === null || dot2.y === null){
                    continue;
                }

                if(dis < dot2.max){

                    if(dot2 === warea && dis > (dot2.max /2) ){
                        dot.x += xGup * 0.03;
                        dot.y += yGup * 0.03;

                    }
                    // 画线
                    ctx.beginPath();
                    ctx.lineWidth = ratio/2;
                    ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
                    ctx.moveTo(dot.x , dot.y);
                    ctx.lineTo(dot2.x , dot2.y);

                    ctx.stroke();
                }


            }
            dot.x += dot.xa;
            dot.y += dot.ya;

            // 遇到边界将加速度反向
            dot.xa *= (dot.x > canvas.width || dot.x < 0)? -1 : 1;
            dot.ya *= (dot.y > canvas.height || dot.y < 0)? -1 : 1;
            // 绘制点

            ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
            ndots.splice(index + 1,1);
        });


        var RAF = (function(){
            return window.requestAnimationFrame ||
              window.webkitRequestAnimationFrame||
              window.mozRequestAnimationFrame||
              window.oRequestAnimationFrame ||
              window.msRequestAnimationFrame ||
              function (callback) {
                  window.setTimeout(callback, 1000 / 60);
              }
        })();

        RAF(animate);
        };

    // 延迟100秒开始执行动画，如果立即执行有时位置计算会出错
    setTimeout(function(){
        animate();
    }, 100);


</script>
</html>